<script setup lang="ts">
// 1. 导入 计算属性的函数
import { ref, computed } from 'vue'

// 数组
const list = ref([
  { id: 1, name: '篮球', num: 998 },
  { id: 2, name: '玩具', num: 2 },
  { id: 3, name: '铅笔', num: 5 }
])

// totalCount 直接当做属性（数据）来使用即可
// 使用的时候获取到的是 return 的结果
// 计算属性中如果用的是状态变量，状态变量发生修改
// 重新执行函数，返回新的结果，更新 UI
const totalCount = computed(() => {
  console.log('执行了哦~')
  // 一般不会写死一个返回值
  // return 10

  // 一般是基于变量（状态变量） 进行计算
  const res = list.value.reduce((prev, cur) => {
    // prev: 第一次是 0，第二次开始上一次的累加结果
    // cur: 数组的每一项
    return prev + cur.num
  }, 0)

  return res
})
</script>

<template>
  <div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <!-- <tr v-for="(item,index) in list" :key="item.id"> -->
      <!-- index 如果不用可以不写 -->
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td @click="item.num++">{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
